<template>
	<!--标签页的右键 菜单-->
	<ul
	  :style="{left:left+'px',top:top+'px'}"
	  class="contextmenu"
	>
	  <li @click="closeAllTabs">关闭所有</li>
	  <li @click="closeOtherTabs('left')">关闭左边</li>
	  <li @click="closeOtherTabs('right')">关闭右边</li>
	  <li @click="closeOtherTabs('other')">关闭其他</li>
	</ul>
</template>

<script>
export default {
    method:{
		   // 关闭所有标签页
           closeAllTabs() {
             this.$store.commit("closeAllTabs");
             this.contextMenuVisible = false;
           },
           // 关闭其它标签页
           closeOtherTabs(par) {
             this.$store.commit("closeOtherTabs", par);
             this.contextMenuVisible = false;
           }
    }
}
</script>

<style scoped>
.contextmenu {
  width: 100px;
  margin: 0;
  border: 1px solid #ccc;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
}
.contextmenu li {
  margin: 0;
  padding: 7px 16px;
}
.contextmenu li:hover {
  background: #f2f2f2;
  cursor: pointer;
}
</style>